import Ember from 'ember';
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('multiple-selector', 'Integration | Component | multiple selector', {
  integration: true
});


var ml = [
  Ember.Object.create({id: "1", dspName: "a"}),
  Ember.Object.create({id: "2", dspName: "b"}),
];

test('it renders', function(assert) {
  assert.expect(3);

  // set the outer context to red
  this.set("selected", [ml[0]]);
  this.set("tobeselect", [ml[0], ml[1]]);

  // this.on('roleChanged',(ls, dirty) => {
  //   this.set("selected", ls);
  //   console.log(ls);
  //   console.log(dirty);
  // });

  this.render(hbs`{{multiple-selector action="roleChanged" selected=selected tobeselect=tobeselect}}`);

  assert.equal(this.$('.multiple-selector-selected a').length, 1, "selected is 1 element.");
  assert.equal(this.$('.multiple-selector-tobeselect a').length, 2, "tobeselect is 2 element.");

  this.$('.multiple-selector-selected a').click();

  assert.equal(this.$('.multiple-selector-selected a').length, 0, "now we has 0 'a' element.");

});
